<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>management</title>
    <link rel="stylesheet" href="logger.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <a name="top"></a>
        <!-- 顶部 -->
        <div id="headerBottom">
            <div id="header">
                <img id="logo" src="../assets/img/title.png">
                <img class="right" id="headPortrait" src="../assets/img/headoportrait.png"
                    @mouseover="isShowUserInfor=true" @mouseleave="isShowUserInfor=false">
                <h2 v-cloak class="right">你好，{{ userName }}</h2>
                <!-- 覆盖层 -->
                <div v-cloak id="userInfor" v-show="isShowUserInfor" @mouseover="isShowUserInfor=true"
                    @mouseleave="isShowUserInfor=false">
                    <ul>
                        <li><a class="inforItem">查看信息</a></li>
                        <li><a id="logOut" class="inforItem" href="login.html">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 中间 -->
        <div id="basicBox">
            <!-- 导航栏 -->
            <div id="nav">
                <ul>
                    <li @click="getState()" class="navItermA">门锁状态</li>
                    <li @click="getManage()" class="navItermA">门锁管理</li>
                    <li @click="getLogger()" class="navItermB">门锁日志</li>
                </ul>
            </div>
            <!-- 主体数据内容 -->
            <div id="content">
                <div id="checkLogger">
                    <input id="lockId" type="text" placeholder="输入锁的id查询对应日志">
                    <a id="getIdLog" class="controlCoin" @click="getIdLogger()">查询</a>
                    <a id="getAllLog" class="controlCoin" @click="getLogger()">显示全部</a>
                </div>
                <table>
                    <tr>
                        <th id="controlNumb">序号</th>
                        <th>操作日志</th>
                        <th></th>
                    </tr>
                    <tr v-cloak v-for="item in loggerData.slice(this.dataBegin,this.dataEnd)">
                        <td>{{ item.index }}</td>
                        <td class="content">
                            用户{{ item.username }}在{{ item.time }}时对id为{{ item.lockid }}的锁进行{{ item.openState }}操作，操作{{ item.success }}。
                        </td>
                        <td><a class="controlCoin" @click="deleteLogger(item.id)">删除</a></td>
                    </tr>
                </table>
                <div style="margin: 20px;height: 20px;text-align: center;">
                    <a id="lastPage" class="controlCoin" @click="lastPage()" style="float: left;" v-show="dataBegin > 0">上一页</a>
                    <a id="nextPage" class="controlCoin" @click="nextPage()" style="float: right;"
                        v-show="dataEnd < this.loggerData.length">下一页</a>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div v-cloak id="footerBottom">
            <div id="footer">
                <p><a href="">返回主页</a> | <a href="">关于我们</a> | <a href="">联系我们</a> | <a href="login.html">退出登录</a></p>
            </div>
        </div>
        <!-- 悬浮块 -->
        <a href="#top" id="floatDiv" v-show="isShowToTop"><img src="../assets/img/toTop.png" width="50px"></a>
    </div>
    <!-- 导入相关的js文件 -->
    <script src="logger.js"></script>
</body>

</html>